<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        body{

            background-color: #EEEEEE;
        }

        #carousel-example-generic img{
            margin: 0 auto;
        }

        #carousel-example-generic{
            margin-top: 0px;
        }

        .media-left media-top h4{
            margin: 0 auto;
        }
    </style>
</head>
<body>
<!--导航条，在顶部固定:nav:html5新出的一个标记，具有比较强的语义性-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!--导航条的头部-->
    <div class="navbar-header">
        <a th:href="@{/front/index}" class="navbar-brand" >
            图片分享
        </a>
        <!-- 缩小之后的按钮 -->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>

        </button>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav navbar-right">

            <li th:if="${session.loginuser==null}"><a  id="login"><span class="glyphicon glyphicon-fire"></span><span id="login_info">登录</span></a></li>
            <li th:if="${session.loginuser!=null}"><a><span th:text="|${session.loginuser==null?'':session.loginuser.user_name}已经登录|"></span></a></li>
            <li th:if="${session.loginuser==null}"><a th:href="@{/front/registerUI}"><span class="glyphicon glyphicon-fire"></span>注册</a></li>
            <li th:if="${session.loginuser!=null}"><a th:href="@{/front/userCenterUI}"><span class="glyphicon glyphicon-list"></span>个人中心</a></li>

        </ul>
    </div>

</nav>




<div class="media" style="width: 70%;margin: 100px auto">
    <div class="media-left media-top" style="float: left;">
        <a href="#">
            <!--            <video  class="media-object" style="width: 600px" controls id="my_video">&lt;!&ndash;-->
            <!--                            /video_prj/upvideo/0cbe0b92-e660-4b82-97ba-3189ab98e3b8.mp4-->
            <!--                            &ndash;&gt;-->
            <!--                <source th:src="|@{/}${video.video_url}|" type="video/mp4"></source>-->
            <!--                -->
            <!--            </video>-->
            <img th:src="|@{/}${image.image_url}|" style="width: 600px;" controls id="my_image">
        </a>
        <br> <br>
<!--        <h4 style="align:center" class="media-heading" th:text="${image.image_name}"></h4>-->
    </div>
    <div class="media-body" style="float: left; margin-left: 40px; margin-top:30px">
        <!--        <h4 class="media-heading" th:text="${image.image_name}"></h4>-->
        <h4>&nbsp;图片信息</h4>
        <br> <br>
        <p>图片名称：<span  th:text="${image.image_name}"></span></p>
        <p>图片类型：<span  th:text="${image.imageType==null?'':image.imageType.type_name}">10</span></p>
        <p>发布人：<span th:text="${image.user==null?'':image.user.user_name}">10</span></p>
        <p>发布时间：<span th:text="${#dates.format(image.image_time,'yyyy-MM-dd HH:mm:ss')}">10</span></p>


        <p>浏览次数：<span th:text="${image.image_play}" id="play_count_span">10</span> &nbsp点赞次数：<span th:text="${image.image_good}" id="good_count_span"></span></p>
        <p>

            <button type="button" th:class="${isCollect?'btn btn-warning btn-sm':'btn btn-default btn-sm'}" id="collect_btn">
                <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
                <span id="c_txt" th:text="${isCollect?'取消收藏':'收藏'}"></span>
            </button>

            <!--
                          如果说需要看当前用户有没有点赞过该视频
                          数据库中需要建立一张表：user_id  video_id(联合主键 ，都是外键)，
                          接下来可以按照和收藏相同的方式处理点赞按钮了
                        -->

            <button type="button"  th:class="${isCollect?'btn btn-warning btn-sm':'btn btn-default btn-sm'}" id="g_btn">
                <span class="glyphicon glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>
                <span id="g_txt" th:text="${isCollect?'取消点赞':'点赞'}"></span>
            </button>

        </p>

    </div>

    <!--在隐藏域中保留了videoId-->
    <input type="hidden" name="imageId" th:value="${image.image_id}"/>
</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">登录</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" th:action="@{/front/login}" method="post" id="login_form" name="login_form">
                    <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">用户名：</label>
                        <div class="col-md-6 ">
                            <input type="text" class="form-control"  required="required" name="user_name" />

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 col-sm-4 control-label">密码：</label>
                        <div class="col-md-6 ">
                            <input type="password" class="form-control"  required="required" name="user_pwd">

                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="login_btn">登录</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type="text/javascript" th:src="@{/asserts/js/jquery-1.12.3.min.js}"></script>
<script type="text/javascript" th:src="@{/asserts/js/bootstrap.min.js}"></script>
<script type="text/javascript">

    //打开登录模态框
    $("#login").click(function(){
        if($("#login_info").text()=='登录'){
            //展示模态框的意思
            $('#myModal').modal();
        }

        return false;//组织超连接的默认行为
    });


    //处理登录
    $("#login_btn").click(function(){

        $("#login_form")[0].submit();
    });

    //@{/manager/listui(currentPage=${i})}
    //index:表示的是页码
    function goPage(index){

        //将当前页的信息保存到隐藏域中
        searhForm.currentPage.value=index;
        //可以以js的方式进行表单提交
        searhForm.submit();
    }

</script>
<script>
    $("#collect_btn").click(function(){

              if($("#c_txt").text()=='收藏'){
                  $("#c_txt").text('取消收藏');
                  $(this).removeClass("btn-default");
                  $(this).addClass("btn-warning");
                  //向服务器发送ajax请求,取消收藏
                  $.ajax({
                      type:"post",
                      url:"/front/doCollect",
                      data:{"image_id":$(":hidden[name=imageId]").val()},
                      error:function(){
                          alert("test");
                      },
                      success:function(data){

                          alert(data);
                      }


                  });


              }
              else{
                  $(this).removeClass("btn-warning");
                  $(this).addClass("btn-default");
                  $("#c_txt").text('收藏');
                  //向服务器发送ajax请求进行收藏
                  $.ajax({
                      type:"post",
                      url:"/front/cancelCollect",
                      data:{"image_id":$(":hidden[name=imageId]").val()},
                      error:function(){
                          alert("test");
                      },
                      success:function(data){

                          alert(data);
                      }


                  });
              }

    });

    $("#g_btn").click(function(){

              if($("#g_txt").text()=='点赞'){
                  $("#g_txt").text('取消点赞');
                  $(this).removeClass("btn-default");
                  $(this).addClass("btn-warning");
                  //向服务器发送ajax请求,取消收藏
                  $.ajax({
                      type:"post",
                      url:"/front/doGood",
                      data:{"image_id":$(":hidden[name=imageId]").val()},
                      error:function(){
                          alert("test");
                      },
                      success:function(data){


                          alert(data);
                      }


                  });
                  $.ajax({
                      type:"post",
                      url:"/front/addGoodCount",
            data:{"image_id":$(":hidden[name=imageId]").val()},
            error:function(){
                alert("test");
            },
            success:function(data){

                if(data=="success"){

                    var count1=parseInt($("#good_count_span").text());
                    $("#good_count_span").text(count1+1);
                }
            }

                  });


              }
              else{
                  $(this).removeClass("btn-warning");
                  $(this).addClass("btn-default");
                  $("#g_txt").text('点赞');
                  //向服务器发送ajax请求进行收藏
                  $.ajax({
                      type:"post",
                      url:"/front/cancelGood",
                      data:{"image_id":$(":hidden[name=imageId]").val()},
                      error:function(){
                          alert("test");
                      },
                      success:function(data){

                          alert(data);
                      }


                  });

              }

    });



    //加载一次页面，浏览次数+1

        $.ajax({
            type:"post",
            url:"/front/addPlayCount",
            data:{"image_id":$(":hidden[name=imageId]").val()},
            error:function(){
                alert("test");
            },
            success:function(data){

                if(data=="success"){

                    var count=parseInt($("#play_count_span").text());
                    $("#play_count_span").text(count+1);
                }
            }
        });


</script>


</body>
</html>